<template>
  <div id="content">
    <globle-linear-border>
      <el-card class="searchBox">
        <el-form :inline="true">
          <el-form-item label="学年">
              <el-select v-model="pageQuery.otherParams.course.schoolYear" placeholder="选择学年搜索" clearable>
                <el-option v-for="item in schoolYearList" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
            <el-form-item label="学期">
              <el-select v-model="pageQuery.otherParams.course.stage" placeholder="选择学期搜索" clearable> 
                <el-option label="第一学期" :value="1" />
                <el-option label="第二学期" :value="2" />
              </el-select>
            </el-form-item>
          <el-form-item label="教师姓名">
            <el-input v-model="pageQuery.otherParams.teacher.name" placeholder="输入教师姓名搜索" clearable />
          </el-form-item>
          <el-form-item label="课程名称">
            <el-input v-model="pageQuery.otherParams.course.courseName" placeholder="输入教学班搜索" clearable />
          </el-form-item>
          <el-form-item label="学分">
            <el-input v-model="pageQuery.otherParams.course.credit" placeholder="输入学分搜索" clearable />
          </el-form-item>
          <el-form-item label="周数">
            <el-select v-model="week" clearable multiple collapse-tags placeholder="选择上课周数"
              @change="onSelectChange('week')">
              <el-option v-for="item in 16" :key="item" :label="item + '周'" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="星期">
            <el-select v-model="weekDay" clearable multiple collapse-tags placeholder="选择星期"
              @change="onSelectChange('weekDay')">
              <el-option v-for="item in 7" :key="item" :label="chineseWeedDay(item)" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item label="课程序号">
            <el-select v-model="orderNum" clearable multiple collapse-tags placeholder="选择课程的序号"
              @change="onSelectChange('orderNum')">
              <el-option v-for="item in 12" :key="item" :label="chineseOrderNum(item)" :value="item" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <section>
              <el-button type="success" @click.stop="onMoreCilck">高级筛选</el-button>
              <el-button type="primary" icon="Search" @click.stop="getPageInfo">搜 索</el-button>
              <el-button type="warning" icon="RefreshRight" @click.stop="reset">重 置</el-button>
            </section>
          </el-form-item>
        </el-form>
      </el-card>
    </globle-linear-border>

    <globle-linear-border style="margin-top: 20px">
      <el-card class="mainBox">
        <span v-if="tableData.rows">
          <el-table :border="true" stripe :data="tableData.rows" cell-class-name="table-cell"
            header-cell-class-name="table-header-cell">
            <el-table-column  label="学年" width="130">
              <template #default="scope">{{ scope.row.course.schoolYear }}{{ scope.row.course.stage }}</template>
            </el-table-column>
            <el-table-column property="course.courseName" label="课程名称" />
            <el-table-column property="course.tchName" label="教师名称" />
            <el-table-column property="course.teachClass" label="教学班" />
            <el-table-column property="course.week" label="周数" />
            <el-table-column property="course.weekDay" label="星期" />
            <el-table-column property="course.orderNum" label="序号" />
            <el-table-column property="course.place" label="地点" width="120" show-overflow-tooltip />
            <el-table-column property="course.classHourType" label="学时类型" />
            <el-table-column property="course.courseType" label="开课类型" />
            <el-table-column label="选课时间" width="170">
              <template #default="scope">{{ scope.row.createTime }}</template>
              <!-- <template #default="scope">{{ scope.row.createTime.split(' ')[0] }}</template> -->
            </el-table-column>
            <el-table-column fixed="right" width="170" label="操作">
              <template #default="scope">
                <el-button class="co-select" type="primary" size="small" @click.stop="onCheck(scope.row)">详情</el-button>
                <el-button class="co-select" :loading="selectLoading" type="danger" size="small"
                  @click.stop="onCancelSelected(scope.row)">退选</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination v-model:currentPage="pageQuery.pageParams.pageNum"
            v-model:page-size="pageQuery.pageParams.pageSize" :page-sizes="pageSizeOption" :background="true"
            :small="true" layout="total, sizes, prev, pager, next, jumper" :total="tableData.totalSize"
            @size-change="onSizeChange" @current-change="onCurrentChange" />
        </span>
      </el-card>
    </globle-linear-border>

    <!-- 更多条件弹窗 -->
    <more-params ref="moreParamsRef" @reload="reload"></more-params>
    <!-- 详情弹窗 -->
    <detail ref="detailRef"></detail>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, reactive, ref } from 'vue';
import { ElMessage, ElNotification, ElTable } from 'element-plus';
import { ICoSePageParams, IPageRes, APIData, ICoSeDeleteParams } from '../../../type';
import { useUserStore } from '../../../store/user';
import { useAPI } from '../../../request/api';
import { useUtils } from '../../../utils/index';
import MoreParams from './MoreParams.vue';
import Detail from './Detail.vue';
const userStore = useUserStore();

onMounted(() => {
  schoolYearList.value = utils.getStuSchoolYear(Number(userStore.userInfo.grade));
  getPageInfo();
});

const api = useAPI();
const utils = useUtils();
const week = ref([] as any)
const weekDay = ref([] as any)
const orderNum = ref([] as any)
const detailRef = ref();
const moreParamsRef = ref();
const selectLoading = ref(false)
const tableData = ref({} as IPageRes);
const pageSizeOption = [5, 10, 15, 20];
const schoolYearList = ref([] as { label:string; value:string }[]);
const pageQuery = reactive<ICoSePageParams>({
  otherParams: {
    createTime: '',
    student: { studentId: userStore.userInfo.studentId },
    teacher: { name: '',sex: ''},
    course: { 
      courseName: '',
      credit: '',
      week: '',
      weekDay: '',
      orderNum: '',
      //以下在更多弹窗里面
      classHourType: '',
      courseCode: '',
      courseType: '',
      openCollege: '',
      place: '',
      stage: '',
      schoolYear: '',
      teachClass: '',
      totalHours: '',
    }
  },
  pageParams: {
    pageNum: 1,
    pageSize: pageSizeOption[1],
    sortField: '',
    sortType: '',
  },
});

//全部按钮
const onMoreCilck = () => {
  moreParamsRef.value.open();
  pageQuery.otherParams = {
    createTime: '',
    student: { studentId: userStore.userInfo.studentId },
    teacher: { name: '',sex: ''},
    course: { 
      courseName: '',
      credit: '',
      week: '',
      weekDay: '',
      orderNum: '',
      //以下在更多弹窗里面
      classHourType: '',
      courseCode: '',
      courseType: '',
      openCollege: '',
      place: '',
      stage: '',
      schoolYear: '',
      teachClass: '',
      totalHours: '',
    }
  }
}

// 详情按钮
const onCheck = (row: any) => {
  detailRef.value.openByCheck(row);
  // detailRef.value.openByCheck(row);
}

// 退选按钮
const onCancelSelected = async (row: any) => {
  selectLoading.value = true;
  const data:ICoSeDeleteParams = {
    coSeIdList: [row.id],
    courseIdList: [row.course.id]
  };
  const res: APIData = await api.coSelection.delete(data);
  if (res.data) {
    ElNotification({
      title: '退选成功',
      message: `您已成功退选：${row.course.courseName}`,
      type: 'success',
    })
    await getPageInfo();
    selectLoading.value = false;
  } else {
    ElMessage.error(res.message);
    selectLoading.value = false;
  }
}

const reset = () => {
  pageQuery.otherParams = {
    createTime: '',
    student: { studentId: userStore.userInfo.studentId },
    teacher: { name: '',sex: ''},
    course: { 
      courseName: '',
      credit: '',
      week: '',
      weekDay: '',
      orderNum: '',
      //以下在更多弹窗里面
      classHourType: '',
      courseCode: '',
      courseType: '',
      openCollege: '',
      place: '',
      stage: '',
      schoolYear: '',
      teachClass: '',
      totalHours: '',
    }
  }
  pageQuery.pageParams = {
    pageNum: 1,
    pageSize: pageSizeOption[1],
    sortField: '',
    sortType: ''
  }
  getPageInfo();
}

// 当多选框条件改变时触发
const onSelectChange = (type: string) => {
  if (type == 'week') pageQuery.otherParams.course.week = week.value.join(',')
  if (type == 'weekDay') pageQuery.otherParams.course.weekDay = weekDay.value.join(',')
  if (type == 'orderNum') pageQuery.otherParams.course.orderNum = orderNum.value.join(',')
}

// 转中文星期  计算属性
const chineseWeedDay = computed(() => {
  return (weekDay: number) => {
    switch (weekDay) {
      case 1: return '星期一';
      case 2: return '星期二';
      case 3: return '星期三';
      case 4: return '星期四';
      case 5: return '星期五';
      case 6: return '星期六';
      case 7: return '星期天';
    }
  }
})

// 转中文课程序号  计算属性
const chineseOrderNum = computed(() => {
  return (orderNum: number) => {
    switch (orderNum) {
      case 1: return '第一节';
      case 2: return '第二节';
      case 3: return '第三节';
      case 4: return '第四节';
      case 5: return '第五节';
      case 6: return '第六节';
      case 7: return '第七节';
      case 8: return '第八节';
      case 9: return '第九节';
      case 10: return '第十节';
      case 11: return '第十一节';
      case 12: return '第十二节';
    }
  }
})

//分页大小
const onSizeChange = (val: number) => {
  pageQuery.pageParams.pageSize = val;
  pageQuery.pageParams.pageNum = 1;
  getPageInfo();
};
//分页页码
const onCurrentChange = (val: number) => {
  pageQuery.pageParams.pageNum = val;
  getPageInfo();
};

const reload = (data: any) => {
  tableData.value = data;
}

const getPageInfo = async () => {
  const res: APIData = await api.coSelection.findPage(pageQuery);
  if (res.code === 200) tableData.value = res.data;
  else ElMessage.error(res.message);
};
</script>

<style lang="scss" scoped>
#content {
  height: 100%;
  padding: 14px 32px;

  .searchBox {
    &-item {
      margin-right: 10px;
    }

    // :deep(.el-form-item) {
    //   margin-bottom: 0;
    // }

    :deep(.el-card__body) {
      display: flex;
      justify-content: space-between;
    }

    section {
      display: flex;
    }

    :deep(.el-input__wrapper) {
      width: 200px;
    }
  }

  .mainBox {
    :deep(.el-checkbox__inner) {
      background-color: var(--main-color);
      transition: background 0.3s ease;
    }

    :deep(.el-checkbox__input.is-checked .el-checkbox__inner) {
      background-color: var(--active-color);
      transition: background 0.3s ease;
    }
  }
}
</style>
